import Vue from 'vue'
import Vuex from 'vuex'
import VuexType from '@/constant/vuexType' // 常量文件
Vue.use(Vuex)

// 状态管理器
const store = new Vuex.Store({
  // 管理所有数据的
  state: {
    loading: false, // 显示隐藏加载组件
    userCode: false, // 检测是否登陆授权
    // 用户加入购物车的商品数据
    goodsData: [
      // 测试数据
      // {
      //   'title': '开发实战分享1',
      //   'thumb': 'https://www.fybqq.com/wp-content/uploads/2019/04/list.jpg',
      //   'link': 131,
      //   'price': 3147,
      //   'spec': '红色',
      //   'num': 4
      // }
    ],
    // 单个商品数据（支付页面）
    payData: [],
    // 待付款单个商品数据（支付页面）
    forPay: []
  },
  // 控制修改state数据的函数
  mutations: {
    // 自定义各种方法指令，外部调用相应指令就处理相应操作
    // 用来存放加载层状态的，方便管理（知道当前是否在加载中）
    [VuexType.showLoading]: (state) => {
      let obj = state
      obj.loading = true
    },
    [VuexType.hideLoading]: (state) => {
      let obj = state
      obj.loading = false
    },
    // 增加商品数量
    [VuexType.increment]: (state, newData) => {
      let goodsData = state.goodsData
      goodsData.forEach(item => {
        // 指定商品数据增加数量
        if (item.link === newData.link) {
          item.num += 1
        }
      })
    },
    // 减少商品数量
    [VuexType.decrement]: (state, newData) => {
      let goodsData = state.goodsData
      goodsData.forEach((item, index, obj) => {
        // 指定商品数据减少数量
        if (item.link === newData.link) {
          if (item.num > 1) {
            item.num -= 1
          } else {
            // 删除一个商品（数量为0时）
            obj.splice(index, 1)
          }
        }
      })
    },
    // 多个商品，加入购物车商品
    [VuexType.changeSelectFoods] (state, newData) {
      let goodsData = state.goodsData
      let flag = false
      // 当已有商品时，添加数量
      for (let i = 0; i < goodsData.length; i++) {
        // 指定商品数据增加数量,判断商品颜色是否一至
        if (goodsData[i].spec === newData.spec) {
          goodsData[i]['num'] += 1
          return
        } else {
          flag = true
        }
      }
      // 没有此商品时，添加一条数据进去
      if (flag || goodsData.length === 0) {
        goodsData.push(newData)
      }
    },
    // 单个购买商品
    [VuexType.payData]: (state, newData) => {
      let payData = state.payData
      payData[0] = newData
    },
    // 待支付商品数据
    [VuexType.forPay]: (state, newData) => {
      let newForPay = state.forPay
      newForPay[0] = newData
    }
  },
  // 功能同mutations，但actions可以异步操作--提交给mutations操作
  actions: {
    // 自动生成派发任务指令，es6合并到此参数内
    ...actionsForItem()
    // 以下是手动写法
    // // 减减数量
    // decrement (context, newData) {
    //   context.commit('decrement', newData)
    // },
    // // 支付商品跳转存数据
    // payData (context, newData) {
    //   context.commit('payData', newData)
    // }
  }
})

// 处理常量自动生成actions数据
function actionsForItem () {
  let actions = {}
  for (const key in VuexType) {
    actions[key] = (context, newData) => {
      context.commit(key, newData)
    }
  }
  return actions // 返回拼接好对象
}

export default store
